<template>
  <div>
    <el-card>
      <div>
        <el-page-header @back="back" content="住户添加"> </el-page-header>
      </div>
    </el-card>
    <el-card>
      <div slot="header">基本信息</div>
      <div>
        <el-form ref="form" :model="form" label-width="80px" :inline-message=true >
          <el-form-item label="业主姓名" prop="name" >
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" >
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCode" >
            <el-input v-model="form.idCode"></el-input>
          </el-form-item>
          <el-form-item label="楼栋号" prop="houseCode" >
            <el-input v-model="form.building"></el-input>
          </el-form-item>
          <el-form-item label="门牌号" prop="roomCode" >
            <el-input v-model="form.room"></el-input>
          </el-form-item>
          <el-form-item label="房产编号" prop="propertyCode" >
            <el-input v-model="form.propertyCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add">提交</el-button>
            <el-button type="primary" plain>批量添加</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed:{
    ...mapState(['current_property_index']),
  },
  data() {
    return {
      // rules:{
      //   name: [
          
      //     {required: true, message:'请输入必要信息', trigger: 'blur'},
          
      //   ],
      //   phone: [
      //     {required: true, message:'请输入必要信息', trigger: 'blur'},
         
          
      //   ],
      //   idCode:  [
      //     {required: true, message:'请输入必要信息', trigger: 'blur'},
      //       { min: 18, max: 18, message: '请输入正确的格式', trigger: 'blur' }
         
      //   ],
      //   houseCode:  [
      //     {required: true, message:'请输入必要信息', trigger: 'blur'},
      //   ],
      //   roomCode: [
      //     {required: true, message:'请输入必要信息', trigger: 'blur'},
      //   ],
      //   propertyCode:  [
      //     {required: true, message:'请输入必要信息', trigger: 'blur'},
      //   ],
      // },
      form: {
        propertyIndex:"",
        name: "",
        phone: "",
        idCode: "",
        building: "",
        room:"",
        propertyCode: "",
      },
    };
  },
  methods:{
    // add(){
    //   let form = this.$refs.form
    //   let propertyid = this.current_property_index
    //   form.validate((bool,obj)=>{
    //     console.log(this.form)
    //     if(bool){
    //       this.axios.post("http://47.99.124.245:8082/addOwner",{
    //         ownername:this.form.name,
    //         housecode:this.form.houseCode,
    //         roomcode:this.form.roomCode,
    //         idcode:this.form.idCode,
    //         propertycode:this.form.propertyCode,
    //         phone:this.form.phone,
    //         propertyindex:propertyid
    //       }).then(res=>{
    //         let code = res.data.code
    //         if(code==200){
    //           this.$message.success("添加成功")
    //           this.$router.push('/home/household-show')
    //         }else{
    //           this.$message.error('添加失败')
    //         }
    //       }).catch((err)=>{
    //         this.$message.error("添加失败")
    //       })
    //     }
    //   })
    // },
    add(){
      this.form.propertyIndex = this.current_property_index
      this.$store.commit('insert_to_db_user',this.form)
      this.$router.push('household-show')
    },
    back(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
.el-card {
  margin-top: 2rem;
}
.el-form {
  max-width: 800px;
  margin: auto;
  width: 80%;
}
.el-button {
  min-width: 5rem;
}
</style>